<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年08月24日 17:02
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <el-card class="recommend-article-container" shadow="always">
      <div class="recommend-title">
        <span>推荐文章</span>
      </div>
      <div class="recommend-content">
        <template v-for="(item, index) in articleList">
          <div v-if="index === 0" class="recommend-spec-item">
            <router-link :to="{ name: 'ArticleInfo', params: { id: item.id } }">
              <el-image style="width: 100%; height: 100%" :src="item['blogImage']" fit="cover" class="carousel-img"/>
              <div class="recommend-spec-carousel-title">
                {{item['blogTitle']}}
              </div>
            </router-link>
          </div>
          <div v-else class="recommend-item">
            <router-link :to="{ name: 'ArticleInfo', params: { id: item.id } }" class="recommend-router-link">
              <div class="image-container">
                <el-image style="width: 100%; height: 100%" :src="item['blogImage']" fit="cover" class="carousel-img"/>
              </div>
              <div class="recommend-carousel-title">
                <div>
                  {{item['blogTitle']}}
                </div>
                <div>
                  {{item['createTime']}}
                </div>
              </div>
            </router-link>
          </div>
        </template>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { listBlog } from "@/api/blog/article";

@Component({})
export default class index extends Vue {

  /** 分页参数 */
  private page: any = {
    pageNum: 1,
    pageSize: 5,
    params: {
      activeTab: 'hotRecommend'
    }
  }

  /** 文章列表 */
  private articleList: any = [];

  private created() {
    this.queryRecommendList();
  }

  private queryRecommendList() {
    listBlog(this.page).then((res: any) => {
      this.articleList = res.rows
    })
  }

}
</script>
<style scoped lang="scss">
.recommend-article-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 5px;
  height: 741px;
  .recommend-title {
    font-weight: 600;
    font-size: 20px;
    color: #3B3E41;
  }
  .recommend-content {
    width: 100%;
    height: 680px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
    .carousel-img {
      object-fit: cover; /* 使图片保持高宽比并填充整个容器 */
      border-radius: 5px;
      transition: all 0.6s;
      overflow: hidden;
    }
    .carousel-img:hover {
      transform: scale(1.2);
    }
    .recommend-spec-item {
      width: 100%;
      height: 30%;
      position: relative;
      overflow: hidden;
      border-radius: 5px;
      .recommend-spec-carousel-title {
        width: 100%;
        position: absolute;
        bottom: 20px;
        text-align: center;
        background: rgba(0,0,0,.2);
        font-size: 20px;
        color: white;
      }
    }
    .recommend-item {
      width: 100%;
      height: 14%;
      overflow: hidden;
      .recommend-router-link {
        display: flex;
        flex-direction: row;
        height: 100%;
        width: 100%;
        .image-container {
          width: 32%;
          height: 100%;
          border-radius: 5px;
          overflow: hidden;
        }
        .recommend-carousel-title {
          width: 67%;
          height: 100%;
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          gap: 10px;
        }
      }
    }
  }
}
@media only screen and (max-width: 850px) {
  .recommend-article-container {
    height: 730px !important;
  }
}
</style>
